<template>
  <simplemde-base-com
    ref="SimplemdeBaseCom"
    :value="value"
    class="simplemde-com"
  >
    <template v-slot:bar-right>
      <up-to-url v-if="imgbtn" />
      <a-icon type="save" v-if="savebtn" class="icon w-pointer" @click="saveClick"/>
    </template>
  </simplemde-base-com>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import SimplemdeBaseCom, { BaseComType } from '@/components/global/marked/simplemde/base'
import UpToUrl from '@/components/global/imageUp/upToUrl'

@Component({
  name: 'SimplemdeBase',
  components: {
    SimplemdeBaseCom,
    UpToUrl
  }
})
export default class SimplemdeBase extends Vue {
  // 初始数据
  @Prop({ type: String, default: '' }) value!: string
  @Prop({ type: Boolean, default: true }) savebtn!: boolean
  @Prop({ type: Boolean, default: true }) imgbtn!: boolean

  saveClick () {
    this.$emit('save')
  }

  /**
   * 设置数据
   */
  setData (value: string) {
    (this.$refs.SimplemdeBaseCom as BaseComType).setData(value)
  }

  /**
   * 获取数据
   * @returns {*}
   */
  getData () {
    return (this.$refs.SimplemdeBaseCom as BaseComType).getData()
  }
}

</script>

<style lang="less">
.simplemde-com {
  .icon {
    font-size: 24px;
    cursor: pointer;
    margin-right: 10px;
    color: #999;
  }
  .icon:hover {
    color: #333;
  }
}
</style>
